<template>
  <view v-if="!isLoading" class="container b-f">
    <!-- 分销商中心 -->
    <view class="center" v-if="isDealer">
      <!-- 头部背景图 -->
      <view class="dealer-bg">
        <image class="image" mode="widthFix" :src="setting.background"></image>
      </view>

      <!-- 内容区 -->
      <view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
        <!-- 用户信息 -->
        <view class="widget widget__base m-top20 b-f dis-flex flex-dir-column">
          <view class="base__user f-30">
            <!-- 用户头像 -->
            <avatar-image
              class="user-avatar"
              :url="user.avatar_url"
              :width="150"
              :borderWidth="4"
              :borderColor="`#fff`"
            />
            <view class="user-nickName f-32" @click="handleRealName">{{
              dealer.real_name
            }}</view>
            <view class="user-referee f-24 col-9">
              {{ setting.words.index.words.referee.value }}：{{ refereeName }}
            </view>
          </view>
          <view
            class="base__capital dis-flex flex-dir-column"
            style="display: none !important"
          >
            <!-- 佣金卡片 -->
            <view class="capital-card dis-flex">
              <view class="card-left">
                <view class="f-28 col-f">
                  <text space="ensp"
                    >{{ setting.words.index.words.money.value }}
                    {{ dealer.money }}</text
                  >
                  <text class="m-l-10">元</text>
                </view>
                <view class="f-28 col-f">
                  <text space="ensp"
                    >{{ setting.words.index.words.freeze_money.value }}
                    {{ dealer.freeze_money }}</text
                  >
                  <text class="m-l-10">元</text>
                </view>
              </view>
              <view
                class="card-right flex-box dis-flex flex-x-end flex-y-center"
              >
                <view
                  class="withdraw-btn f-26"
                  @click="$navTo('pages/dealer/withdraw/apply')"
                >
                  {{ setting.words.index.words.withdraw.value }}
                </view>
              </view>
            </view>
            <!-- 已提现金额 -->
            <view class="capital-already clear">
              <view class="already-left f-26 fl">{{
                setting.words.index.words.total_money.value
              }}</view>
              <view class="already-right f-26 fr"
                >{{ dealer.total_money }}元</view
              >
            </view>
          </view>
        </view>

        <!-- 操作列表 -->
        <view class="widget widget__operat clear b-f">
          <!-- <view class="operat__item" @click="$navTo('pages/dealer/withdraw/list')">
            <view class="item__icon">
              <text class="iconfont icon-zhangben" style="color:#F9BA21;"></text>
            </view>
            <view class="item__text f-26">{{ setting.words.withdraw_list.title.value }}</view>
          </view> -->
          <view class="operat__item" @click="$navTo('pages/dealer/order')">
            <view class="item__icon">
              <text class="iconfont icon-dingdan" style="color: #ff7575"></text>
            </view>
            <view class="item__text f-26">{{
              setting.words.order.title.value
            }}</view>
          </view>
          <view class="operat__item" @click="$navTo('pages/dealer/teamvl')">
            <view class="item__icon">
              <text class="iconfont icon-tuandui" style="color: #59c78e"></text>
            </view>
            <view class="item__text f-26">{{
              setting.words.team.title.value
            }}</view>
          </view>
          <view class="operat__item" @click="$navTo('pages/dealer/poster')">
            <view class="item__icon">
              <text class="iconfont icon-erweima" style="color: #5fa5ff"></text>
            </view>
            <view class="item__text f-26">{{
              setting.words.poster.title.value
            }}</view>
          </view>

          <!-- 业绩排名 -->
          <!-- <view
            class="operat__item"
            @click="$navTo('pages/dealer/rank?type=self')"
          >
            <view class="item__icon">
              <u-icon size="90" name="/static/icon/selfRank.png"></u-icon>
              <text class="iconfont icon-rank" style="color:#5fa5ff;"></text>
            </view>
            <view class="item__text f-26">个人业绩排名</view>
          </view> -->

          <!-- <view
            class="operat__item"
            @click="$navTo('pages/dealer/rank?type=team')"
          >
            <view class="item__icon">
              <u-icon size="90" name="/static/icon/teamRank.png"></u-icon>
              <text class="iconfont icon-rank" style="color:#5fa5ff;"></text>
            </view>
            <view class="item__text f-26">团队业绩排名</view>
          </view> -->
        </view>
      </view>
    </view>

    <!-- 当前不是分销商 -->
    <view class="container b-f" v-if="!isDealer">
      <view class="no-dealer">
        <view class="no-icon dis-flex flex-x-center">
          <image src="/static/not-dealer.png"></image>
        </view>
        <view class="no-msg dis-flex flex-x-center f-30"
          >{{ setting.words.index.words.not_dealer.value }}
        </view>
        <!-- 立即申请 -->
        <view class="no-submit form-submit">
          <view class="button" @click="$navTo('pages/dealer/apply')"
            >{{ setting.words.index.words.apply_now.value }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import AvatarImage from "@/components/avatar-image";
import * as Api from "@/api/dealer";
import { checkLogin } from "@/core/app";

export default {
  components: {
    AvatarImage,
  },
  data() {
    return {
      // 正在加载
      isLoading: true,
      // 当前用户信息
      user: undefined,
      // 当前是否为分销商
      isDealer: false,
      // 当前分销商信息
      dealer: undefined,
      // 推荐人昵称
      refereeName: undefined,
      // 分销设置
      setting: {
        background: undefined,
        words: undefined,
      },
      // 是否已登录
      isLogin: false,
      //扫码的推荐人
      sceneUid: 0,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(e) {
    if (uni.getStorageSync("sceneUid")) {
      this.sceneUid = uni.getStorageSync("sceneUid");
    }
  },
  onShow(options) {
    // 判断是否已登录
    this.isLogin = checkLogin();
    if (this.isLogin === false) {
      this.$navTo("pages/login/index", {}, "redirectTo");
    }
    this.getCenter();
  },

  methods: {
    // 获取分销商中心数据
    getCenter() {
      const app = this;
      app.isLoading = true;
      Api.center().then((result) => {
        // api数据赋值
        const data = result.data;
        app.isDealer = data.isDealer;
        app.user = data.user;
        app.dealer = data.dealer;
        app.refereeName = data.refereeName;
        app.setting = data.setting;
        // 设置当前页面标题
        app.setPageTitle();
        app.isLoading = false;
        uni.removeStorageSync("sceneUid"); //移除扫码缓存
        if (app.sceneUid) {
          if (
            !data.refereeName ||
            data.refereeName == "平台" ||
            data.isDealer === false
          ) {
            this.dealerCheck();
          } else {
            app.$toast("您已绑定上级代理".data.refereeName);
          }
        }
      });
    },
    // 获取是否是分销商，上级推荐人
    dealerCheck() {
      const app = this;
      Api.dealerCheck({ sceneUid: app.sceneUid }).then((res) => {
        console.log(res);
        app.$toast(res.message);

        if (res.data && res.data.isDealer === false) {
          //跳转分销
          this.$navTo(
            "pages/dealer/apply",
            { dealer_id: app.sceneUid, sceneName: res.data.sceneName },
            "redirectTo"
          );
        }
      });
    },

    // 跳转到修改分销商名字页面
    handleRealName() {
      this.$navTo("otherpages/user/bind", {
        real_name: this.dealer.real_name,
        type: "dealer",
      });
    },

    // 设置当前页面标题
    setPageTitle() {
      uni.setNavigationBarTitle({
        title: this.setting.words.index.title.value,
      });
    },
  },
};
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.dealer-bg {
  .image {
    width: 100%;
  }
}

.widget-body {
  position: relative;

  .widget {
    width: 88%;
    box-sizing: border-box;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
    border-radius: 12rpx;
  }
}

.widget__base {
  margin-top: -60rpx;

  .base__user {
    position: relative;
    padding: 15rpx 40rpx;
    border-bottom: 1rpx solid #e7e7e7;

    .user-avatar {
      position: absolute;
      top: -75rpx;
      right: 60rpx;
    }

    .user-nickName {
      margin-top: 30rpx;
      margin-bottom: 10rpx;
    }
  }

  .base__capital {
    padding: 35rpx;

    .capital-card {
      height: 200rpx;
      padding: 36rpx 0;
      background-color: #8e84fc;
      border-radius: 10rpx;
      box-sizing: border-box;

      .card-left {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        padding-left: 32rpx;
      }

      .card-right {
        .withdraw-btn {
          width: 130rpx;
          height: 50rpx;
          background: #fff;
          color: #8e84fc;
          border-radius: 25rpx;
          margin-right: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .capital-already {
      padding: 20rpx;
      padding-bottom: 0;
    }
  }
}

/* 操作列表 */
.widget__operat {
  padding: 50rpx;
  margin-top: 40rpx;

  .operat__item {
    width: 33.33333%;
    float: left;
    margin-bottom: 50rpx;
    text-align: center;

    &:last-child {
      margin-bottom: 0;
    }

    .item__icon {
      margin-bottom: 8rpx;
      font-size: 58rpx;
    }
  }
}

/* 当前不是分销商 */
.no-dealer {
  padding-top: 150rpx;
}

.no-icon {
  image {
    width: 420rpx;
    height: 240rpx;
  }
}

.no-msg {
  padding: 86rpx 0;
}

.form-submit {
  .button {
    font-size: 30rpx;
    background: #786cff;
    border: 1rpx solid #786cff;
    color: white;
    border-radius: 50rpx;
    padding: 22rpx 0;
    width: 470rpx;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;

    &.disabled {
      background: #8e84fc;
      border-color: #8e84fc;
      color: white;
    }
  }
}
</style>
